<template>
  <div>
    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    <div class="a">
      <div class="b">
        <div class="b_1">

          <div style="display:flex" v-if="detailInfo.ordersState==10 || detailInfo.ordersState==0 || detailInfo.ordersState==9 || detailInfo.ordersState==1 && isSeller">
            <div>
              <span class="d_1" style="color:#999999">{{toFix2(Number(detailInfo.ordersPrice)+Number(detailInfo.goodsFreight))}}</span>
              <span class="d_2" style="color:#999999">元</span>
            </div>
            <div class="d_3" v-if="detailInfo.ordersState==1 && isSeller" @click="tosellMoney">
              <van-icon name="arrow" />
            </div>
          </div>

          <div style="display:flex" v-else>
            <div >
              <span class="d_1">{{toFix2(Number(detailInfo.ordersPrice)+Number(detailInfo.goodsFreight))}}</span>
              <span class="d_2">元</span>
            </div>
            <div class="d_3" v-if="isBuyer && detailInfo.ordersState!=8" @click="tobuyMoney">
              <van-icon name="arrow" />
            </div>
            <div class="d_3" v-if="isSeller && detailInfo.ordersState!=8" @click="tosellMoney">
              <van-icon name="arrow" />
            </div>
            <div class="d_3" v-if="detailInfo.ordersState==8 && isBuyer" @click="torefundMoney">
              <van-icon name="arrow" />
            </div>
            <div class="d_3" v-if="detailInfo.ordersState==8 && isSeller" @click="torefundMoney">
              <van-icon name="arrow" />
            </div>
          </div>        
         
        </div>
        <div class="b_2" v-if="detailInfo.ordersState==1 ">
          <span style="text-align:center">未付款</span>
        </div>
        <div class="b_2" v-if="detailInfo.ordersState==10 || detailInfo.ordersState==0 || detailInfo.ordersState==9">
          <span style="text-align:center">交易已关闭</span>
        </div>
        <div class="b_2" v-if="detailInfo.ordersState==2 || detailInfo.ordersState==5 ">
          <span style="text-align:center">钱款在集市担保账户</span>
          <van-icon name="question" />
        </div>
        <div class="b_2" v-if="detailInfo.ordersState==7 && isSeller">
          <span style="text-align:center">钱款已打入您的账户</span>
          <van-icon name="question" />
        </div>
        <div class="b_2" v-if="detailInfo.ordersState==4 || detailInfo.ordersState==7 && isBuyer">
          <span style="text-align:center">钱款已打入卖家账户</span>
        </div>
        <div class="b_2" v-if="detailInfo.ordersState==8 ">
          <span style="text-align:center">该笔订单有{{toFix2(Number(detailInfo.ordersPrice)+Number(detailInfo.goodsFreight))}}退款，已原路返回</span>
        </div>
        <div style="color:#333333;font-size:12px;display:flex;vertical-align:middle" v-if="detailInfo.ordersState==1">
          <div>
            <van-count-down
              :time="detailInfo.getTime*60*1000"  
              format="HH时mm分"
              style="font-size:12px;"
            />
          </div>
          <div>后，若买家仍未付款，交易自动关闭</div>
        </div>
        <div style="color:#333333;font-size:12px;display:flex;vertical-align:middle" v-if="detailInfo.ordersState==4">
          <div>
            <van-count-down
              :time="detailInfo.getTime*60*1000"
              format="DD天HH时mm分"
              style="font-size:12px;"
            />
          </div>
          <div>内完成评价，双方互评后才能看到对方评价</div>
        </div>
        <div style="color:#333333;font-size:12px;vertical-align:middle" v-if="detailInfo.ordersState==3 && isBuyer">
          <div>
            <van-count-down
              :time="detailInfo.getTime*60*1000"
              format="DD天HH时mm分后，"
              style="font-size:12px;text-align:center;"
            />
          </div>
          <div>您仍未确认收货,系统会自动确认,钱款将会打到卖家的集市账户中</div>
        </div>
        <div style="color:#333333;font-size:12px;vertical-align:middle" v-if="detailInfo.ordersState==3 && isSeller">
          <div>
            <van-count-down
              :time="detailInfo.getTime*60*1000"
              format="DD天HH时mm分后，"
              style="font-size:12px;text-align:center;"
            />
          </div>
          <div>买家仍未确认收货,系统会自动确认,钱款将会打到您的集市账户中</div>     
        </div>
        <div style="color:#333333;font-size:12px;display:flex;vertical-align:middle" v-if="detailInfo.ordersState==6">
          <div>
            <van-count-down
              :time="detailInfo.getTime*60*1000"
              format="DD天HH时mm分"
              style="font-size:12px;"
            />
          </div>
          <div>后，若卖家仍未评价，评价将关闭</div>            
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { getFun } from "@/api/publicFun.js";
let publicFun = getFun();
export default {
  data() {
    return {
      
    };
  },
  props: ["detailInfo","isBuyer","isSeller"],
  methods: {
    finish() {},
    //买家查看钱款去向
    tobuyMoney(){
      let arg='[{"userId":"'+this.userId+'"},{"ordersId":"'+this.ordersId+'"}]' 
	   	this.link('/market/orders/buyMoney',arg)
    },
    //卖家查看钱款去向
    tosellMoney(){
      let arg='[{"userId":"'+this.userId+'"},{"ordersId":"'+this.ordersId+'"}]' 
	   	this.link('/market/orders/moneys',arg)
    },
    torefundMoney(){
      let arg='[{"userId":"'+this.userId+'"},{"ordersId":"'+this.ordersId+'"}]' 
	   	this.link('/market/orders/refundMoney',arg)
    }
  },
  mixins: [publicFun], //混入
  mounted() {
    this.ordersId = this.$router.currentRoute.query.ordersId;
    this.userId = this.$router.currentRoute.query.userId;
  }
};
</script>

<style scoped="">
.b {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  align-items: center;
  flex-direction: column;
}
.b_1 {
  display: flex;
  margin-bottom: 10px;
}
.a {
  padding: 10px 10px 10px;
}
.c_1 {
  color: #aaa;
}
.c_2 {
  margin-top: 10px;
}
.d_1 {
  font-size: 36px;
  color: #f4685d;
}
.d_2 {
  color: #f4685d;
}
.d_3 {
  margin-left: 10px;
  color: #999;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.b_2 {
  color: #ccc;
}
</style>